<template>
    <div id="body-padding">
        <p id="p">更改密码</p>
        <div class="inp">
            <input 
                type="password" 
                placeholder="旧密码"
                v-model.trim="num1"
            >
            <span class="fa fa-lock a "></span>
        </div>
        <div class="inp">
            <input 
                type="password" 
                placeholder="新密码"
                v-model.trim="num2"
            >
            <span class="fa fa-lock a "></span>
        </div>
        <div class="inp">
            <input 
                type="password" 
                placeholder="确认密码"
                v-model.trim="num3"
            >
            <span class="fa fa-lock a "></span>
        </div>
        <button id="btn" @click="btnClick">更换密码</button>
    </div>
</template>

<script>

export default {
    data(){
        return {
            num1:"",
            num2:"",
            num3:"",
        }
    },
    methods:{
        btnClick(){
            if(this.num2!=this.num3){
                this.layer.msg("两次密码不一致");
                return;
            }
            var reg = /^\w{3,18}$/;
            if(reg.test(this.num1)&&reg.test(this.num2)){
                this.http.get("/users/psw",{params:{psw1:this.num1,psw2:this.num2}})
                .then(res=>{
                    this.layer.msg(res.data.msg);
                    if(res.data.err==5){
                        window.location.href = '#/login';
                    }
                    if(!res.data.err){
                        window.location.href = '/#/new/day/me';
                    }
                })
                
            }else{
                this.layer.msg("密码在3-18位");
            }
        }
    },
    activated(){
        this.$store.dispatch("word");
    }
}
</script>

<style scoped>
.inp{
    margin: 4px;
    margin-bottom: 10px;
    position: relative;
    border: solid 1px #999;
    border-radius: 3px;
    padding: 1px 8px;
    padding-left: 40px;
    
}
.inp input{
    outline:none;
    width: 100%;
    height: 32px;
    border: none;
    font-size: 14px;
}
.inp:hover{
    border: solid 1px #2D93E8;
    /*color: black !important;*/
}
.a{
    position: absolute;
    top: 8px;
    left: 12px;
    color: #777;
}
</style>